<template>
  <up-popup :show="show" :round="round" :mode="position" @close="close" @open="open" :closeOnClickOverlay="closeOnClickOverlay">
    <view class="popup-content">
		<image v-if="closeIcon" class="close-img" :src="closeImag" mode="" @click="close"></image>
		<view class="" @click.stop>
			<slot></slot>
		</view>
    </view>
  </up-popup>
</template>

<script>
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  name: 'PopupMessage',
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    round: {
      type: Number,
      default: 10,
    },
	  position: {
	    type: String,
	    default: 'bottom'
	  },
    message: {
      type: String,
      default: '人生若只如初见，何事秋风悲画扇',
    },
	closeIcon:{
		type: Boolean,
		default: false,
	},
	closeImag:{
		type: String,
		default: 'https://oss.jtmckj.com/wmp/kbq/common/i_icon_close.png',
	},
	closeOnClickOverlay:{
		type: Boolean,
		default: false
	}
  },
  emits: ['update:show'],
  setup(props, { emit }) {
    const { show, round, message,closeIcon  } = toRefs(props);

    const close = () => {
	 props.show = false
      emit('update:show', false);  // 向父组件通知关闭
    };

    const open = () => {
      emit('update:show', true);   // 向父组件通知打开
    };

    return {
      show,
      round,
      message,
      close,
      open,
	  closeIcon
    };
  },
});
</script>

<style scoped>
/* 可以在这里添加一些样式 */
.popup-content {
  position: relative;  /* 为了关闭按钮定位 */
  padding: 20px;
}
.close-img {
	 position: absolute;
	  top: 10px;
	  right: 10px;
	width: 36rpx;
	height: 36rpx;
}

</style>
